<template>
  <el-tabs type="border-card" v-model="type" @tab-click="handleClick">
    <el-tab-pane label="日间手术" name="1">
      <div class="warp">
        <div class="top-box">
          <div class="days-setting-div">
            <span>可预约天数：</span>
            <el-input
              style="width:200px"
              v-model="openDays"
              size="mini"
              placeholder="请输入天数"
              type="text"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
            ></el-input>
          </div>
          <el-row>
            <el-col :span="3" align="left"
              ><span
                >预约排班
                <i class="el-icon-circle-plus" @click="handlePlus"></i></span
            ></el-col>
            <el-col :span="3" align="left"><span>开放床位数</span></el-col>
          </el-row>
          <div>
            <el-row
              :gutter="20"
              v-for="(item, index) in appointmentList"
              :key="index"
            >
              <el-col :span="3">
                <el-input
                  v-model="item.timeSlot"
                  size="mini"
                  placeholder="请输入班次"
                />
              </el-col>
              <el-col :span="3">
                <div class="input-close">
                  <el-input-number
                    size="mini"
                    v-model="item.appointmentCount"
                    :min="0"
                    :max="maxBedCount"
                  ></el-input-number>
                  <i
                    class="el-icon-circle-close"
                    @click="handleReduce(index)"
                  />
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="btn-box">
            <el-button type="primary" size="mini" @click="submit"
              >生成号源</el-button
            >
          </div>
        </div>
        <hr />
        <div class="tb-box">
          <div class="tb-title">
            <i class="el-icon-date" />日间病房号源池<i
              class="el-icon-edit-outline"
              @click="handleEditTable(1)"
            />
            <template v-if="isShowBtn">
              <el-button
                size="mini"
                @click="handleTableCancel"
                style="margin-left:40px;"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="handleTableSave"
                >保存</el-button
              >
            </template>
          </div>
          <div class="tb-table">
            <el-table
              :data="tableData"
              size="mini"
              height="100%"
              border
              style="width: 100%"
            >
              <el-table-column prop="timeSlot" label="班次" width="180">
              </el-table-column>
              <el-table-column
                v-for="(item, index) in weekList"
                :key="index"
                :label="item.label"
                width="180"
              >
                <template v-slot="{ row }">
                  <div
                    v-for="(element, elKey) in row.dayAndCountDtoList"
                    :key="elKey + '111'"
                  >
                    <template v-if="element.weekday === item.weekday">
                      <div v-if="element.isInput" class="input-close">
                        <el-input-number
                          size="mini"
                          v-model="element.appointmentCount"
                          :min="0"
                          :max="maxBedCount"
                        ></el-input-number>
                      </div>
                      <span v-else>{{ element.appointmentCount }}</span>
                    </template>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- <div class="bottom-btn">
        <el-button size="mini" style="margin-right:20px">重置</el-button>
        <el-button type="primary" size="mini">生成号源</el-button>
      </div> -->
    </el-tab-pane>
    <el-tab-pane label="日间输注" name="4">
      <div class="warp">
        <div class="top-box">
          <div class="days-setting-div">
            <span>可预约天数：</span>
            <el-input
              style="width:200px"
              v-model="openDays"
              size="mini"
              placeholder="请输入天数"
              type="text"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
            ></el-input>
          </div>
          <el-row>
            <el-col :span="3" align="left"
              ><span
                >预约排班 <i class="el-icon-circle-plus" @click="handlePlus"></i
              ></span>
            </el-col>
            <el-col :span="3" align="left"><span>开放床位数</span></el-col>
          </el-row>
          <div>
            <el-row
              :gutter="20"
              v-for="(item, index) in appointmentList"
              :key="index"
            >
              <el-col :span="3">
                <el-input
                  v-model="item.timeSlot"
                  size="mini"
                  placeholder="请输入班次"
                />
              </el-col>
              <el-col :span="3">
                <div class="input-close">
                  <el-input-number
                    size="mini"
                    v-model="item.appointmentCount"
                    :min="0"
                    :max="maxBedCount"
                  ></el-input-number>
                  <i
                    class="el-icon-circle-close"
                    @click="handleReduce(index)"
                  />
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="btn-box">
            <el-button type="primary" size="mini" @click="submit"
              >生成号源</el-button
            >
          </div>
        </div>
        <hr />
        <div class="tb-box">
          <div class="tb-title">
            <i class="el-icon-date" />日间病房号源池<i
              class="el-icon-edit-outline"
              @click="handleEditTable(2)"
            />
            <template v-if="isShowBtnRight">
              <el-button
                size="mini"
                @click="handleTableCancel"
                style="margin-left:40px;"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="handleTableSave"
                >保存</el-button
              >
            </template>
          </div>
          <div class="tb-table">
            <el-table
              :data="tableData"
              size="mini"
              height="100%"
              border
              style="width: 100%"
            >
              <el-table-column prop="timeSlot" label="班次" width="180" />
              <el-table-column
                v-for="(item, index) in weekList"
                :key="index"
                :label="item.label"
                width="180"
              >
                <template v-slot="{ row }">
                  <div
                    v-for="(element, elKey) in row.dayAndCountDtoList"
                    :key="elKey + '111'"
                  >
                    <template v-if="element.weekday === item.weekday">
                      <div v-if="element.isInput" class="input-close">
                        <el-input-number
                          size="mini"
                          v-model="element.appointmentCount"
                          :min="0"
                          :max="maxBedCount"
                        ></el-input-number>
                      </div>
                      <span v-else>{{ element.appointmentCount }}</span>
                    </template>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- <div class="bottom-btn">
        <el-button size="mini" style="margin-right:20px">重置</el-button>
        <el-button type="primary" size="mini">生成号源</el-button>
      </div> -->
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { getMaxCount, getAllInfo, save ,updateRJSet} from "@/utils/apis/public";
export default {
  data() {
    return {
      isShowBtn: false,
      isShowBtnRight: false,
      weekList: [
        {
          weekday: 2,
          label: "周一",
        },
        {
          weekday: 3,
          label: "周二",
        },
        {
          weekday: 4,
          label: "周三",
        },
        {
          weekday: 5,
          label: "周四",
        },
        {
          weekday: 6,
          label: "周五",
        },
        {
          weekday: 7,
          label: "周六",
        },
        {
          weekday: 1,
          label: "周日",
        },
      ],
      type: "1", //1.日间手术  4.日间病房
      openDays: 7,
      maxBedCount: 0,
      tableData: [],
      appointmentList: [{ timeSlot: "", appointmentCount: 0 }],
    };
  },
  created() {
    this.getMaxCountVue();
    this.getAllInfoVue();
  },
  methods: {
    handleTableSave() {
      const param ={
        type:this.type,
        weekAppointmentDto:this.tableData
      };

      updateRJSet(param)
        .then((res) => {
          this.$message.success("更新成功");
          this.getAllInfoVue();
        })
        .catch((error) => {
          this.$message.error("更新失败");
        });
    },
    handleTableCancel() {
      this.isShowBtn = false;
      this.isShowBtnRight = false;
      if (this.tableData.length > 0) {
        this.tableData.forEach((item) => {
          item.dayAndCountDtoList.forEach((element) => {
            this.$set(element, "isInput", false);
          });
        });
      }
    },
    handleEditTable(type) {
      if (type === 1) {
        //日间手术
        this.isShowBtn = true;
      } else {
        // 日间输注
        this.isShowBtnRight = true;
      }
      if (this.tableData.length > 0) {
        this.tableData.forEach((item) => {
          item.dayAndCountDtoList.forEach((element) => {
            this.$set(element, "isInput", true);
          });
        });
      }
    },
    handleReduce(index) {
      this.appointmentList.splice(index, 1);
    },
    handlePlus() {
      this.appointmentList.push({
        timeSlot: "",
        appointmentCount: this.maxBedCount,
      });
    },
    handleClick(tab, event) {
      this.type = tab.name;
      this.handleTableCancel();
      this.getMaxCountVue();
      this.getAllInfoVue();
    },
    getMaxCountVue() {
      let param = {
        type: this.type,
      };
      getMaxCount(param).then((res) => {
        if (res.data.code === 200) {
          if (this.type === "1") {
            this.maxBedCount = res.data.data;
          } else if (this.type === "4") {
            this.maxBedCount = res.data.data;
          }
          //修改初始化第一条最大床位数
          this.appointmentList[0].openBedNum = this.maxBedCount;
        } else {
          this.$message.error("读取最大床位数错误,请联系管理员");
        }
      });
    },
    getAllInfoVue() {
      let param = {
        type: this.type,
      };
      this.tableData = []
      getAllInfo(param).then((res) => {
        if (res.data.code === 200) {
          this.openDays = res.data.data.appointmentDayCount;
          this.appointmentList = res.data.data.timeSlotConfigurationLists;
          this.tableData = res.data.data.weekAppointmentLists;
        } else {
          if (this.type === "1") {
            this.$message.error("读取日间手术配置错误,请联系管理员");
          } else if (this.type === "4") {
            this.$message.error("读取日间输注配置错误,请联系管理员");
          }
        }
      });
    },
    submit() {
      if (this.validateAppointmentSet() === false) {
        this.$message.error("预约排班/开放床位数 不能为空");
        return;
      }
      const param = {
        type: this.type,
        appointmentDayCount: this.openDays,
        timeSlotLists: this.appointmentList,
      };
      save(param).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("保存成功");
          this.getAllInfoVue();
        } else {
          this.$message.error("保存失败");
        }
      });
    },

    /*提交时前台校验 */
    validateAppointmentSet() {
      var flag = true;
      this.appointmentList.forEach((element) => {
        if (element.classes === "" || element.openBedNum === "") {
          flag = false;
        }
      });
      return flag;
    },
  },
};
//分组
export const groupBy = (list, fn) => {
  const groups = {};
  list.forEach(function(o) {
    const group = JSON.stringify(fn(o));
    groups[group] = groups[group] || [];
    groups[group].push(o);
  });
  return groups;
};
</script>
<style lang="less" scoped>
.el-icon-edit-outline {
  cursor: pointer;
  margin-left: 6px;
  color: #409eff;
  font-size: 20px;
}
.table-input {
  display: flex;
  align-items: center;
  .input {
    margin-right: 6px;
    flex: 1;
  }
}
.bottom-btn {
  text-align: center;
}
.btn-box {
  width: 40%;
  text-align: right;
  margin-top: 15px;
}
.top-box {
  margin-left: 30px;
  margin-bottom: 30px;
}
.tb-box {
  padding-top: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  .tb-title {
    height: 40px;
    // line-height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    > i {
      margin-right: 10px;
      margin-top: 2px;
    }
  }
  .tb-table {
    flex: 1;
  }
}
.input-close {
  display: flex;
  align-items: center;
  > i {
    margin-left: 6px;
    cursor: pointer;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.warp {
  height: 73vh;
  //   text-align: center;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
  //   font-weight: 600;
  overflow: hidden;
}
.days-setting-div {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  span {
    display: inline-block;
    text-align: right;
  }
  el-input {
    width: 400px;
  }
}
.timeSlot-setting-div {
  display: flex;
  span {
    display: inline-block;
    width: 120px;
    text-align: right;
    margin: 10px 5px;
  }
}
</style>
